<template>
<!-- 二级 -->
  <div>

    <template v-for="item in list">
      <!-- 有二级菜单 -->
      <el-submenu v-if="(item.children || []).length" :index="item.name" :key="item.name">
        <template slot="title">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" min-width="24" height="24" class="dls-icon " focusable="false"><path fill="currentColor" fill-rule="evenodd" d="M6.5 1.5a5 5 0 0 0-5 5v11a5 5 0 0 0 5 5h11a5 5 0 0 0 5-5v-11a5 5 0 0 0-5-5h-11zm-3 5a3 3 0 0 1 3-3h11a3 3 0 0 1 3 3v6.795l-2.601-2.278a3.222 3.222 0 1 0-5.687-.643l-1.181 1.18A3.208 3.208 0 0 0 9.222 11a3.21 3.21 0 0 0-2.063.747L3.5 8.087V6.5zm0 4.415V17.5a3 3 0 0 0 3 3h11a3 3 0 0 0 3-3v-1.546l-4.213-3.69a3.22 3.22 0 0 1-2.807-.33l-1.217 1.218a3.222 3.222 0 1 1-6.18.347L3.5 10.915zm12.945-1.693a1.222 1.222 0 1 0-2.445 0 1.222 1.222 0 0 0 2.445 0zM9.222 13a1.222 1.222 0 1 1 0 2.445 1.222 1.222 0 0 1 0-2.445z" clip-rule="evenodd"></path></svg>
          <span class="side_item-text" :title="item.name">{{item.name}}</span>
        </template>

        <el-input v-if="item.children[0].name=='绘图总览'" v-model="searchData" placeholder="工点搜索" @input="search" clearable  class="searchInput"></el-input>

        <navigation-item :list="item.children || []"  :key="item.id"></navigation-item>
      </el-submenu>
      <!-- 只有一级菜单 -->
      <el-menu-item v-else :index="item.url" :key="item.id" @click="_handleSelect(item.url, item.name)">
          <i class="menu_icon iconfont" :class="item.menuIcon"></i>
          <span class="side_item-text" slot="title" :title="item.name">{{item.name}}</span>
      </el-menu-item>
    </template>
  </div>

</template>

<script>

import NavigationItem from './navigation-item'

export default {

  data() {
    return {
      headerList:[{
        name:'推广报告',
      children:[{
        name:'推广报告',
      }]
      }],
      searchData:''
    };
  },
  name: 'NavigationItem',
  props: ['list'],
  components: { NavigationItem },
  methods: {
    /**
   * 菜单选择时 同步设置标签导航
   * @param {*} path 当前点击的url
   * @param {*} name 当前点击的路由名称
   */
    _handleSelect (path, name) {
      // COLLAPSE.mutations.setState({ key: 'menuClickFrom', value: 'left' })
    }
  }
}

</script>
<style lang="less" >

</style>

